<template>
  <div class="index-box" ref="index">

        <div class="mainBox" >
          <div class="search" ref="search" style="margin-bottom: 15px;">
             <el-button type="primary" @click="handleAdd()" icon="el-icon-plus" size="small">新增</el-button>
          </div>
          <div class="table" ref="table" style="width: 100%;">
            <el-table :data="dataList" style="width: 100%;"  border stripe :height="tableHeight" v-loading="loading">
              <el-table-column prop="columnName" label="商品组名"></el-table-column>
              <el-table-column prop="sort" label="排序"  width="200"  align="center"></el-table-column>
              <el-table-column prop="name" label="操作"  width="200" align="center">
                <template #default="scope">
                  <div class="verticalBtn d-flex">
                      <el-button
                        size="medium"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)"
                      >修改</el-button>
                     <!-- <el-button
                        size="medium"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelt(scope.row)"
                      >删除</el-button> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page" ref="page">
            <MyPagination
               :total="total"
               :page.sync="searchForm.pageNum"
               :limit.sync="searchForm.pageSize"
               @pagination="dataInfo"
             />
          </div>
        </div>

     <!-- /*新增修改*/	 -->
     <el-dialog :title="dialogTitle" :close-on-click-modal="false" width="600px" v-dialogDrag :visible.sync="addVisible" @close="addVisible = false">
       <el-form  :model="user" label-position="right" :rules="rules" ref="user" class="userModel">
         <el-form-item label="商品组名:" prop="columnName" label-width="85px">
           <el-input v-model="user.columnName" autocomplete="off" placeholder="请输入商品组名" maxlength="6" show-word-limit></el-input>
           <div style="color:red">商品组名建议四个字。</div>
         </el-form-item>
         <el-form-item label="排序:" prop="sort" label-width="85px" v-if="user.columnId">
           <el-input v-model="user.sort" autocomplete="off" placeholder="请输入排序" ></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="addVisible = false" size="small">取 消</el-button>
         <el-button type="primary" @click="submitUser('user')" size="small" :loading="userLoading">保 存</el-button>
       </div>
     </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import { storeColumnlist,storeColumnaddOrUpdate,deleteStoreColumn } from '@/api/getData';
  import option from '../../common/option.js';
  import { regionData,CodeToText } from 'element-china-area-data';
  export default {
    data() {
      return {
        loading: false,
        userLoading:false,
        tableHeight:0,//table 高度
        dataList:[],
        searchForm: {
          pageNum:1,
          pageSize:20
        },
        total:0,
        multipleSelection: '',
        addVisible:false,
        dialogTitle:'',
        user: {
          columnId: '',
          columnName:'',
          sort:''
        },
        rules: {
          columnName: [{required: true, message: '商品组名不能为空',trigger: 'blur'}]
        },

      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.page.offsetHeight - 35;
      })
    },
    methods: {
      handleAdd(){
        this.addVisible = true;
        this.user.columnId = '';
        this.user.columnName = '';
        this.user.sort = '';
        this.dialogTitle = '新增商品组';
      },
      handleEdit(row){
        this.addVisible = true;
        this.user.columnId = row.columnId;
        this.user.columnName = row.columnName;
        this.user.sort = row.sort;
        this.dialogTitle = '编辑商品组';
      },
      handleDelt(row) {
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteStoreColumn({
            columnId: row.columnId
          }).then((result) => {
            if (result.code == 200) {
              this.dataInfo();
              this.$message.success(result.msg);
            } else {
              this.$message.error(result.msg);
            }
          });
        }).catch(() => {
          //console.log('');
        });
      },
      submitUser(formName) {
        /*添加用户*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            storeColumnaddOrUpdate(this.user).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.addVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.userLoading = false;
            });
          }
        })
      },
      handleTablechangeSort (column, prop, order) {/*表格排序*/
         this.searchForm.orderByColumn =  column.prop;
         this.searchForm.isAsc = column.order;
         this.dataInfo();
      },

      resetQuery() {
        this.resetForm("searchForm");
        this.dataInfo();
      },

      async dataInfo() {
        try {
          this.loading = true;
          const result = await storeColumnlist(this.searchForm);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }

          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding: 10px;
      height: 52px;
  }
  .index-box{
    padding:15px;
    margin-left:0px;
  }
  .tree-box /deep/ .el-tree-node{
     background: #D8E4DD;
  }
  .tree-box> /deep/ .el-tree>.el-tree-node{
    padding:3px;
  }
  .tree-box> /deep/ .el-tree .is-current{
    background:#fff;
  }
  .table-box{
    padding:15px
  }
  .down{
    color: #909399;
    cursor: pointer;
    text-decoration:underline;
  }
  .down:hover{
    color: #a6a9ad;
  }
  .up{
    color:#61997A;
    cursor: pointer;
    text-decoration:underline;
  }
  .up:hover{
    color:#81ad95;
  }
  .treeTitle{
    color: #606266;
    font-size: 15px;
    margin:20px 20px 0 20px
  }
</style>
